<template>
  <div class="about">
    <head-tab-switch navTitle="任务领取模式 >" :list="navList" @changeNav="changeNav" :isActive="QueryType"/>
    <!-- 选择一段时间 -->
    <div class="timeWidht">
      <SearchTime @getTimes="getTimes" :clearTime="clearTime" :initTime="initTime" disableTime="before"/>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border
    :header-cell-style="{background: '#F2F2F2',color: '#333'}"
    highlight-current-row
    header-row-class-name="strong">
      <el-table-column
        fixed="left"
        align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="left">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" >查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="mini">更多</el-button>
        </template>
      </el-table-column>
      <common-table :propData="propData" ></common-table>
    </el-table>
    <!-- 分页 -->
    <pagination-tool :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="fetchDiagnoseList"/>
    <!-- 倒计时 -->
    <count-down @CountFresh="CountFresh"/>
    <el-button type="primary" @click="submit">button</el-button>
    <el-date-picker
      v-model="formData.startTime"
      type="monthrange"
      value-format="yyyy-MM-DD"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份">
    </el-date-picker>
    <!-- 可选择关键字div -->
    <div class="mt20" style="height:100px">
      <edit-textarea ref="dia" :temStr="signStr" id='dia' @getText="getText"/>
    </div>
    <div class="mt10 mb20">
      <el-button @click="clearText('dia')">清除输入框</el-button>
      <el-button @click="getChildText('dia')">获取输入框值</el-button>
    </div>
  </div>
</template>
<script>
import SearchTime from '@/components/common/SearchTime' // 搜索时间
import CommonTable from '@/components/common/CommonTable' // 表格
import PaginationTool from '@/components/common/PaginationTool' // 分页
import CountDown from '@/components/common/CountDown' // 倒计时
import HeadTabSwitch from '@/components/common/HeadTabSwitch' // 头部tab
import EditTextarea from '@/components/common/EditTextarea' // 可选择关键字输入框

import { getHomeReqData } from '@/api/test' // 请求

export default {
  data () {
    return {
      clearTime: false,
      initTime: [],
      propData: [
        {
          prop: 'requestSn',
          label: '编号',
          renderHeader: this.renderHeader
        },
        {
          prop: 'patName',
          label: '姓名'
        },
        {
          prop: 'sex',
          // sortable: true,
          label: '性别',
          renderHeader: this.renderHeader
        },
        {
          prop: 'num',
          // sortable: true,
          label: '数量',
          renderHeader: this.renderHeader
        }
      ],
      tableData: [
        {
          requestSn: '1',
          sex: 1212,
          num: 10
        },
        { 
          requestSn: '2',
          sex: 33,
          num: 67
        },
        {
          requestSn: '3',
          sex: 123,
          num: 70
        },
        {
          requestSn: '4',
          sex: 555,
          num: 89
        }
      ],
      listQuery: {
        pageIndex: 1,
        pageSize: 20
      },
      total: 10000,
      navList: [
        {
          name: '全部',
          num: '',
          Ishow: true
        },
        {
          name: '待书写',
          num: '',
          Ishow: true
        },
        {
          name: '待审核',
          num: '',
          Ishow: true
        },
        {
          name: '书写+审核',
          num: '',
          Ishow: true
        },
        {
          name: '已完成',
          num: '',
          Ishow: true
        }
      ],
      initActive: '',
      QueryType: '',
      formData: {
        sortType: '',
        isDesc: 1,
        startTime: ''
      },
      chooseTableHeader: '', // 排序表头
      signStr: `肝脏上届平[五|六|七]肋间，[@肋下未探及|可探及厚3mm|长5mm]，右叶上下斜经3mm，左叶厚5mm，长10mm，
      肝切面形态[@正常|失常]，包膜平滑，肝内回声分布不均，\r\n
      在肝[@右叶|左叶|尾叶]内胆处可见[一个直径约mm|几个直径约mm|多个直径约][强光点|强光团]，后方[@伴|不伴]声影。\r\n
      胆囊大小约mm，切面正常，壁薄光滑，[@其内未见异常回声|其内可见一个大小为xmm的强光团，伴后方声影|其位置伴随体位改变而移动，其内可见几个直径约mm的强光团，伴后方声影]`
    }
  },
  mounted () {
    this.initTime = this.$getDefaultTime(6, -1)

    // this.tableData = [
    //   {
    //     requestSn: '1看Unstaged files这一块内容，我们按住shift，选择所有你要提交的文件，然后再点鼠标右键，选择add(意思就是add到本地的索引库)，操作完成后，Staged files这块内容就会出现我们刚才选择的所有文件，如下图看Unstaged files这一块内容，我们按住shift，选择所有你要提交的文件，然后再点鼠标右键，选择add(意思就是add到本地的索引库)，操作完成后，Staged files这块内容就会出现我们刚才选择的所有文件，如下图看Unstaged files这一块内容，我们按住shift，选择所有你要提交的文件，然后再点鼠标右键，选择add(意思就是add到本地的索引库)，操作完成后，Staged files这块内容就会出现我们刚才选择的所有文件，如下图',
    //     patName: '2看Unstaged files这一块内容，我们按住shift，选择所有你要提交的文件，然后再点鼠标右键，选择add(意思就是add到本地的索引库)，操作完成后，Staged files这块内容就会出现我们刚才选择的所有文件，如下图',
    //     sex: '3看Unstaged files这一块内容，我们按住shift，选择所有你要提交的文件，然后再点鼠标右键，选择add(意思就是add到本地的索引库)，操作完成后，Staged files这块内容就会出现我们刚才选择的所有文件，如下图'

    //   }
    // ]
    this.fetchDiagnoseList()
  },
  methods: {
    getTimes (val) {
      console.log('getTimes', val)
      // this.listQuery.startTime= val !== null ? val[0].split(' ')[0] + ' 00:00:00' : '' // 开始时间
      // this.listQuery.endTime = val !== null ? val[1].split(' ')[0] + ' 23:59:59' : ''// 结束时间
    },
    async fetchDiagnoseList () {
      // console.log(this.listQuery)
      var params = {
        lookupkey: 'ClinicDiagnosis'
      }
      var res = getHomeReqData(params)
      console.log(res)
    },
    CountFresh (val) { // 倒计时
      if (val) {
      }
    },
    changeNav (data) { // 切换标签
      if (data.name === '全部') {
        this.QueryType = ''
      } else if (data.name === '待书写') {
        this.QueryType = '1'
      } else if (data.name === '待审核') {
        this.QueryType = '2'
      } else if (data.name === '已完成') {
        this.QueryType = '4'
      } else {
        this.QueryType = '3'
      }
      // localStorage.setItem('isActive', this.QueryType)
    },
    submit () {
      console.log('tththhtht', this.formData.startTime)
    },
    renderHeader (h, { column }) { // 排序
      return h('div', { class: 'flex_position' }, [
        h('span', null, column.label),
        h('span', { class: 'icon_position' }, [
          h('i', {
            class: {
              'el-icon-caret-top': true,
              clr_main: this.chooseTableHeader === column.property && this.formData.isDesc === 1
            },
            on: {
              click: () => {
                this.chooseTableHeader = column.property
                this.formData.sortType = 2
                this.formData.isDesc = 1
              }
            }
          }),
          h('i', {
            class: {
              'el-icon-caret-bottom': true,
              clr_main: this.chooseTableHeader === column.property && this.formData.isDesc === 2
            },
            on: {
              click: () => {
                this.chooseTableHeader = column.property
                this.formData.sortType = 2
                this.formData.isDesc = 2
              }
            }
          })
        ])
      ])
    },
    // 子传父获取可选关键字输入框值
    getText (obj) {
      console.log(obj)
    },
    // 清除可选关键字输入框值
    clearText (boxRef) {
      this.$refs[boxRef].clearInput()
    },
    // 主动获取可选关键字输入框值
    getChildText (boxRef) {
      this.$refs[boxRef].getTemStr(boxRef)
    }
  },
  components: {
    SearchTime,
    CommonTable,
    PaginationTool,
    CountDown,
    HeadTabSwitch,
    EditTextarea
  }
}

</script>
<style lang="less" scoped>
.timeWidht {
  width: 250px;
  height: 50px;
}

</style>
